﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery手动切换图片特效的设计与实现</title>
		<link rel="stylesheet" href="css/ppt2.css">
        <script src="js/jquery-3.6.1.min.js"></script>
    </head>
    <body>
	    <!--标题-->
        <h3>jQuery手动切换图片特效的设计与实现</h3>
		<!--水平线-->
        <hr>
		<!--图片轮播区域-->
        <div class="ppt-container">
            <ul>
                <li onmouseover="showImage(1)">意大利威尼斯</li>
				<hr>
                <li onmouseover="showImage(2)">希腊爱琴海</li>
				<hr>
                <li onmouseover="showImage(3)">巴黎卢浮宫</li>
				<hr>
				<li onmouseover="showImage(4)">印度泰姬陵</li>
				<hr>
                <li onmouseover="showImage(5)">英国巨石阵</li>
				<hr>
            </ul>
			  <img id="pptImage" src="image/ppt2/3.jpg" />
        </div>
        <script>
			function showImage(name){
				$("#pptImage").attr("src","image/ppt2/"+name+".jpg");
			}
        </script>
	</body>
</html>
